<%
  use crate::components::sections::common_resources::{CommonResources, Cards};
  use crate::components::sections::EmploymentBenefits;
  use crate::components::cards::NewsletterSubscribe;
  use crate::utils::config::standalone_dashboard;
%>

<div data-controller="pages-careers-landing-page" class="overflow-hidden tuck-under-navbar">
  <div class="container-fluid">
    <div class="container">

      <div class="position-relative overflow-show glow-1" >
        <div class="position-absolute sky-1"></div>
        <div class="position-absolute orange"></div>
      </div>

      <div class="pt-0 pb-2 pt-xxl-4 pb-xxl-5">
        <%+ feature_banner %>
      </div>

      <div class="d-flex flex-column gap-4 py-4 py-lg-5 my-3 my-lg-3">
        <div class="text-center d-flex flex-column gap-xxl-3 gap-1">
          <h1>Let’s build <span class="text-gradient-blue">together</span></h1>
          <p class="m-auto body-large-text text-white-200" style="max-width: 55rem;">Join us to help build the future of AI infrastructure. </p>
        </div>
  
        <div class="container mt-3">
          <div class="row gy-4 gx-4">
            <% for position in positions {%>
            <div class="col-xxl-4 col-md-6 col-12">
              <div class="card generic-card h-100">
                <a class="card-body d-flex flex-column goto-arrow-hover-trigger" href="<%- position.href %>">
                  <div class="card-eyebrow eyebrow-text mb-2"><%- position.tag.unwrap_or_else(|| String::new()).to_uppercase() %></div>
                  <h4><%- position.title%></h4>
                  <p class="text-white-300"><%- position.description.unwrap_or_else(|| String::new()) %></p>
                  <span class="material-symbols-outlined goto-arrow-shift-animation mt-auto ms-auto text-white">arrow_forward</span>
                </a>
              </div>
            </div>
            <% } %>
  
            <div class="col">
              <div class="card generic-card card-generic-job-position h-100">
                <a class="card-body d-flex flex-column goto-arrow-hover-trigger" href="/careers/apply/generic-position">
                  <h4>Don't see an exact fit?</h4>
                  <p class="text-white-300">We still want to hear from you if you’re passionate about contributing to PostgresML. Contact us.</p>
                  <span class="material-symbols-outlined goto-arrow-shift-animation mt-auto ms-auto text-white">arrow_forward</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex flex-xl-row flex-column gap-5 justify-content-center align-items-center py-4 py-lg-5 my-3 my-lg-3">
        <div class="p-5" style="flex: 1">
          <img src="/dashboard/static/images/pgml_careers_team_desktop.png" class="w-100"/>
        </div>

        <div style="flex: 1">
          <div class="d-flex flex-column text-white-200">
            <h2>Working with us</h2>
            <p>
              We’re a seed stage startup on a mission to provide open-source access to AI for everyone. Here’s how we work:
            </p>

            <ul class="ps-3">
              <li>We bias toward action and course correct based on feedback</li>
              <li>We're not afraid of failure and we're always learning</li>
              <li>We’re all about <a href="https://github.com/postgresml/postgresml">open-source principles</a> (transparency, collaboration, inclusive meritocracy)</li>
            </ul>
            <p>We use Rust to operate within Postgres for memory efficiency and performance at scale with standard supervised learning libraries, such as Torch, Tensorflow and XGBoost to build a hosted, horizontally scalable platform on top of Postgres.</p>
            <p>We're looking for experienced contributors to help shape the core product, inside and out. We're generally looking for individual contributors, but everyone can be critical in building the future team as well as the core product.</p>
            <p>Sounds like you? Join us!</p>
            <div class="d-flex justify-content-center justify-content-xl-start"><a class="btn btn-primary-web-app" href="/about">About Us</a></div>
          </div>
        </div>
      </div>

      <div class="position-relative overflow-show glow-1" >
        <div class="position-absolute ellipse-18"></div>
        <div class="position-absolute ellipse-19"></div>
      </div>

      <div class="py-4 py-lg-5 my-3 my-lg-3">
        <%+ EmploymentBenefits::new() %>
      </div>

      <% if !standalone_dashboard() { %>
      <div class="mt-5 container">
        <%+ NewsletterSubscribe::new() %>
      </div>
      <% } %>

      <div class="mt-5">
        <%+ CommonResources::new().show(Vec::from([Cards::Contribute, Cards::Docs, Cards::Community])) %>
      </div>

    </div>
  </div>
</div>
